﻿@page
@model IndexModel
@{
    ViewData["Title"] = "XPaging测试页";
}
<link href="~/lib/XPaging/XPaging.css" rel="stylesheet" />
<style type="text/css">
    *, *::before, *::after {
        box-sizing: content-box;
    }

    table {
        width: 50%;
        border-top: 1px solid #808080;
        border-left: 1px solid #808080;
    }

        table th {
            background: #0094ff;
            color: #fff;
            border-right: 1px solid #808080;
            border-bottom: 1px solid #808080;
        }

        table td {
            border-right: 1px solid #808080;
            border-bottom: 1px solid #808080;
        }
</style>
<div class="text-center">
    <form id="form1">
        @*<input id="btn_search" type="button" value="查询" />*@
        <table>
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr v-for="item in TabData">
                <td>
                    <input type="checkbox" :value="item.ID" />
                </td>
                <td>{{item.Name}}</td>
                <td>{{item.Sex}}</td>
                <td>{{item.Age}}</td>
            </tr>
        </table>
        <x-paging v-bind:codelist="codelist" v-bind:total="total" v-bind:pagelist="pagelist"></x-paging>
    </form>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/vue.min.js"></script>
    <script src="~/lib/XPaging/XPaging-2.0.min.js?1"></script>
    <script type="text/javascript">
        var databind = new Vue({
            el: '#form1',
            data: {
                TabData: [],
                total: 0,
                codelist: [],
                pagelist: []
            },
            created: function () {
                //分页控件初始化
                XPaging.config({ DataBindFunc: "getData" }).init(this);
                //因为我是同步操作，若是使用ajax获取数据，则无需加延迟
                setTimeout("getData();", 200);
            }
        });

        //获取数据
        function getData() {
            var list = [];
            //因为直接使用控件的方法，没加判断，所以上面将控件初始化了，若是判断刚进页面，则上面只需配置，无需初始化
            var begin = XPaging.GetPageSize() * (XPaging.GetCurrentPageIndex() - 1),
                end = XPaging.GetPageSize() * XPaging.GetCurrentPageIndex() > 1000 ? 1000 : XPaging.GetPageSize() * XPaging.GetCurrentPageIndex();
            for (var i = begin; i < end; i++) {
                var data = {
                    ID: i,
                    Name: "姓名" + i,
                    Sex: i % 2 == 0 ? "女" : "男",
                    Age: "年龄" + i
                }
                list.push(data);
            }
            //不加延迟，数据属性获取不到
            databind.TabData = list;
            databind.total = 1000;
            XPaging.init(databind);
        }

        $(function () {
            //查询
            $("#btn_search").click(function () {
                XPaging.config({ CurrentPageIndex: 1 });
                getData();
            });
        });
    </script>
</div>
